<template>
  <view class="targetJobContainer">
    <u-field :field-style="fieldStyle" disabled placeholder="未选择" @click="toJobDetail('targetJob1')" v-model="targetJob1"
             label="目标职业1"
             :right-icon="targetJob1 ? '' : 'arrow-right'" clear-size="48">
      <view slot="right" v-if="targetJob1">
        <u-icon name="close-circle-fill" size="48" color="#959595" @click="targetJob1=''"></u-icon>
      </view>
    </u-field>
    <u-field :field-style="fieldStyle" disabled placeholder="未选择" @click="toJobDetail('targetJob2')" v-model="targetJob2"
             label="目标职业2"
             :right-icon="targetJob2 ? '' : 'arrow-right'" clear-size="48">
      <view slot="right" v-if="targetJob2">
        <u-icon name="close-circle-fill" size="48" color="#959595" @click="targetJob2=''"></u-icon>
      </view>
    </u-field>
    <u-field :field-style="fieldStyle" disabled placeholder="未选择" @click="toJobDetail('targetJob3')" v-model="targetJob3"
             label="目标职业3"
             :right-icon="targetJob3 ? '' : 'arrow-right'" clear-size="48">
      <view slot="right" v-if="targetJob3">
        <u-icon name="close-circle-fill" size="48" color="#959595" @click="targetJob3=''"></u-icon>
      </view>
    </u-field>
    <view class="select-wrap">
      <view class="select-btn" @click="save">保存</view>
    </view>
  </view>
</template>

<script>
  import {TOAST} from "../../util/util";
  import {request} from "../../util/api";
import {getCurrentFullPath} from "../../util/util";
  export default {
    onLoad(option) {
      if (option.select) {
        let str = option.select.split('#')[1]
        let setkey = option.select.split('#')[0]
        let otherStr = str.split('$')
        otherStr.forEach(item => {
          if (item.split('*')[0] != setkey) {
            this.$set(this, item.split('*')[0], item.split('*')[1] == 'null' ? '' : item.split('*')[1])
          }
        })
        this.$set(this, setkey, option.name)
      } else {
        request({
          url: '/system/CompassDiary/getMyDiaryInfo/' + uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
        }).then(res => {
          this.targetJob1 = res.data.compassNormalUser.goalJob1
          this.targetJob2 = res.data.compassNormalUser.goalJob2
          this.targetJob3 = res.data.compassNormalUser.goalJob3
        })
      }
    },

    data() {
      return {
        targetJob1: "",
        targetJob2: "",
        targetJob3: "",
        // 输入框样式
        fieldStyle: {
          marginLeft: "20rpx",
          color: "#101010"
        }
      };
    },
    methods: {
		// 转发功能
		onShareAppMessage(res) {
		  return {
		    path: getCurrentFullPath()
		  }
		},
      toJobDetail(targetJob) {
        if (this[targetJob]) {
          return
        }
        uni.navigateTo({
          url: "/pages/explore/job?select=" + targetJob + '#' + `targetJob1*${this.targetJob1 || 'null'}$targetJob2*${this.targetJob2 || 'null'}$targetJob3*${this.targetJob3 || 'null'}`
        })
      },

      save() {
        if (!this.targetJob1 && !this.targetJob2 && !this.targetJob3) {
          TOAST('请至少选择一个目标职业')
          return
        }
        let info = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
        let userId = info && info.userId
        request({
          url: '/system/normalUser/diary',
          data: {
            userId: userId,
            goalJob1: this.targetJob1,
            goalJob2: this.targetJob2,
            goalJob3: this.targetJob3
          },
          method: 'post'
        }).then(res => {
          this.$u.route({
            url: '/pages/forum/personal',
            type: 'reLaunch'
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .select-wrap {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 23px;
    position: fixed;
    bottom: 0;
    width: 100%;

    .select-btn {
      width: 320px;
      height: 46px;
      line-height: 46px;
      line-height: 46px;
      border-radius: 23px;
      color: #fff;
      font-weight: bold;
      font-size: 18px;
      background: rgba(42, 108, 172, 100);
      text-align: center;
    }
  }
</style>
